import { useMemo, useState } from "react";
import "./App.css";
import Color from "./Color";
import { ColorPicker } from "./ColorPicker";
import { colord, extend } from "colord";
import mixPlugin from "colord/plugins/mix";
import namesPlugin from "colord/plugins/names";

extend([mixPlugin, namesPlugin]);

const msg = "欢迎徐歆越小朋友!";

function mixColor(color1: string, color2: string) {
  const c1 = colord(color1).toHex();
  const c2 = colord(color2).toHex();
  const m = colord(c1).mix(c2, 0.5).toHex();
  return m;
}

function App() {
  const [color1, setColor1] = useState("yellow");
  const [color2, setColor2] = useState("magenta");
  const mixed = mixColor(color1, color2);
  const mStyle = useMemo(() => {
    const s: React.CSSProperties = {
      color: mixed,
      fontSize: 96,
      fontWeight: "bold",
    };
    return s;
  }, [mixed]);
  return (
    <div className="App">
      <div style={{ display: "flex" }}>
        <ColorPicker color={color1} onChange={setColor1} />
        <Color color={color1} />
        <h3>{color1}</h3>
        <ColorPicker color={color2} onChange={setColor2} />
        <Color color={color2} />
        <h3>{color2}</h3>
      </div>
      <h1 style={mStyle}>{msg}</h1>
    </div>
  );
}

export default App;
